<template>
	<div class="order-main">
		<!-- 导航navbar -->
		<van-nav-bar title="填写订单" left-arrow @click-left="onClickLeft" />
		<!-- 地址 -->
		<van-contact-card
			type="edit"
			:name="currentContact.name"
			:tel="currentContact.tel"
			@click="onEdit"
		/>
		<!-- 订单列表 -->
		<div v-for="order in orders" :key="order.id">
			<van-card
			:num="order.address"
			price="2.2"
			:desc="order.receiver"
			:title="order.user.username"
			thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
		/>
		</div>
		
		<!-- 优惠券 -->
		<van-coupon-cell
			:coupons="coupons"
			:chosen-coupon="chosenCoupon"
			@click="showList = true"
		/>
		<!-- 优惠券列表 -->
		<van-popup
			v-model="showList"
			round
			position="bottom"
			style="height: 90%; padding-top: 4px"
		>
			<van-coupon-list
				:coupons="coupons"
				:chosen-coupon="chosenCoupon"
				:disabled-coupons="disabledCoupons"
				@change="onChange"
				@exchange="onExchange"
			/>
		</van-popup>
	</div>

	<!-- 优惠券 -->
</template>

<script>
	import {loadOrderListAPI} from "../services/order"

const coupon = {
	available: 1,
	condition: "无使用门槛\n最多优惠12元",
	reason: "",
	value: 150,
	name: "优惠券名称",
	startAt: 1489104000,
	endAt: 1514592000,
	valueDesc: "1.5",
	unitDesc: "元",
};
export default {
	
	data() {
		return {
			//订单
			orders:[],
			page:1,
			per:5,
			// 地址
			currentContact: {
				name: "张三",
				tel: "13000000000",
			},
			// 优惠
			showList: false,
			chosenCoupon: -1,
			coupons: [coupon],
			disabledCoupons: [coupon],

		};
	},
	created(){
		this.onload()
	},
	methods: {
		// navbar
		onClickLeft() {
			this.$router.go(-1);
		},
		// 订单列表加载
		async onload(){
			const res = await loadOrderListAPI(this.page,this.per);
			this.orders=res.data;
			console.log(this.orders);
		},
		// 地址
		onEdit() {
			alert("编辑");
		},
		// 优惠
		onChange(index) {
			this.showList = false;
			this.chosenCoupon = index;
		},
		onExchange(code) {
			this.coupons.push(code);
		},
	},
};
</script>

<style></style>
